.comments-wrap{
  padding: 10px 0;

  .more-btn{
    margin-top: 30px;
    text-align: center;
    color: $color-white;

    span{
      display: inline-block;
      padding: 10px 30px;
      border-radius: $border-radius;
      background: $color-highlight-text;
      cursor: pointer;
    }
  }

  .comment-other{
    position: relative;
    margin: 10px 0;

    .list-wrap{
      display: flex;

      .list{
        margin-right: 5px;
        cursor: pointer;
      }

      .iconfont{
        vertical-align: bottom;
        font-size: $font-size-large;
      }
    }

    // 表情容器
    .expression-wrap{
      display: none;
      overflow-y: scroll;
      -webkit-overflow-scrolling: touch;
      box-sizing: border-box;
      position: absolute;
      top: 30px;
      left: 0;
      z-index: 2;
      width: 100%;
      height: 200px;
      padding: 10px;
      background: $color-white;
      border-radius: $border-radius;

      &:after{
        content: "";
        display: inline-block;
        width: 100%;
      }

      a{
        display: inline-block;
        width: 50px;
        height: 50px;
        margin: 4px;
        border-radius: $border-radius;
        background: $color-sub-background;
        text-align: center;
        line-height: 50px;
      }

      img{
        vertical-align: middle;
      }
    }
  }

  .comment-from{
    box-sizing: border-box;
    margin-bottom: 20px;
    padding: 10px;
    border-radius: $border-radius;
    background: $color-sub-background;

    .comment-tips:not(p){
      font-size: $font-size-small;
      color: $color-red;
    }

    .comment-form-content{
      box-sizing: border-box;
      margin-bottom: 20px;
      padding: 5px;
      border-radius: $border-radius;
      background: $color-white;
    }

    textarea{
      box-sizing: border-box;
      resize: vertical;
      width: 100%;
      min-height: 150px;
      padding: 5px;
    }

    .box{
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
    }

    .comment-inp{
      box-sizing: border-box;
      width: 49%;
      padding: 5px;
      border-radius: $border-radius;
      background: $color-white;

      &:nth-of-type(1),
      &:nth-of-type(2){
        margin-bottom: 20px;
      }

      label{
        display: block;
      }

      input{
        -webkit-appearance: none;
        width: 100%;
        height: 30px;
      }
    }

    // 验证码
    .comment-from-code{
      position: relative;

      .canvas-img-code{
        position: absolute;
        bottom: 5px;
        right: 5px;
        z-index: 5;
      }
    }

    .submit-wrap{
      width: 250px;
      height: 45px;
      margin: 20px auto;
      border-radius: 30px;
      background: $color-highlight-text;
      text-align: center;
      line-height: 45px;
      cursor: pointer;

      input{
        -webkit-appearance: none;
        color: $color-white;
      }

      .iconfont{
        vertical-align: middle;
        font-size: 18px;
        color: $color-white;
      }
    }
  }

  .comment-list{
    box-sizing: border-box;
    position: relative;
    width: 95%;
    margin: 0 0 20px 5%;
    padding: 10px 10px 10px 50px;
    border-radius: $border-radius;
    background: $color-sub-background;

    &:last-of-type{
      margin-bottom: 0;
    }

    .list-gravatar{
      position: absolute;
      top: 5px;
      left: -30px;
      border-radius: $border-radius;
    }

    .author{
      margin-right: 5px;
      font-size: 18px;
      font-weight: bold;
    }

    // 浏览器信息
    .browser-info{
      display: inline-block;
      vertical-align: text-bottom;
      margin-right: 5px;
      padding: 2px 4px;
      background: #06aaff;
      border-radius: 3px;
      color: $color-white;

      &.chrome{
        background: linear-gradient(to right, #5087ec, #d95040, #f2bd42);
      }

      &.safari{
        background: linear-gradient(to right, #2670cb, #47a2c5);;
      }

      &.firefox{
        background: linear-gradient(to right, #dd3a45, #fcea67);
      }

      &[class*="qq"]{
        background: linear-gradient(to right, #3072d1, #4ea8f3);
      }

      &.edge{
        background: #4378b5;
      }

      &.internet-explorer{
        background: linear-gradient(to right, #fadc4f, #8ae2fb, #57a0d4);
      }

      &.wechat{
        background: #94d258;
      }

      &.ucbrowser{
        background: linear-gradient(to right, #ed5e31, #f8cd46);
      }

      &.opera{
        background: #eb3b3a;
      }
    }

    // 系统信息
    .system-info{
      display: inline-block;
      vertical-align: text-bottom;
      margin-right: 5px;
      padding: 2px 4px;
      background: #fc5c7d;
      background: linear-gradient(to right, #fc5c7d, #6a82fb);
      border-radius: 3px;
      color: $color-white;
    }

    .list-content{
      margin: 10px 0;

      /deep/ img{
        max-width: 40%;
        height: initial !important;
        max-height: initial !important;
        vertical-align: bottom;

        &.wp-smiley{
          width: 25px;
        }
      }
    }

    // 评论者等级
    .icon-vip{
      display: inline-block;
      margin-right: 5px;

      // 博主
      &.icon-admin{
        width: 20px;
        height: 20px;
        background-position: -172px -70px;
      }

      &.vip-style-1{
        width: 16px;
        height: 14px;
        background-position: -147px -70px;
        @for $i from 1 through 6 {
          &.vip#{$i + 1}{
            background-position-Y: -#{70 - $i * -25}px;
          }
        }
      }

      &.vip-style-2{
        width: 43px;
        height: 13px;
        background-position: -2px -3px;
        transition: .5s;
        @for $i from 1 through 6 {
          &.vip#{$i + 1}{
            background-position-X: -#{$i * 59}px;
          }
        }

        &:hover{
          background-position-Y: -23px;
        }
      }
    }

    // 博主
    .admin{
      vertical-align: bottom;
      width: 20px;
      height: 20px;
      margin-right: 5px;
    }

    time,
    span{
      font-size: $font-size-small;
      color: #a8b6c0;
    }

    .list-btn-wrap{
      a{
        display: inline-block;
        padding: 5px 15px;
        border-radius: $border-radius;
        background: $color-white;
      }
    }
  }
}
@media screen and (max-width: 767px) {
  .comments-wrap{
    .comment-from{
      .box{
        display: block;
      }

      .comment-inp{
        width: 100%;
      }

      .comment-from-url{
        margin-bottom: 20px;
      }

      .submit-btn{
        width: 100%;
      }
    }

    // 评论列表
    .comment-list{
      .list-gravatar{
        left: -15px;
      }

      .system-wrap{
        display: block;
        margin: 5px 0;
      }
    }
  }
}
